<template>
    <div class="click">
        <div class="sort">
            <ul>
                
                <router-link to="/comment">
                    <li><a href="###" class="iconfont">&#xe6bc;评论</a></li>
                </router-link>
                
                <router-link to="/click">
                    <li  class="active"><a href="###" class="iconfont active">&#xe677;喜欢</a> <i style="color:#26a2ff;font-size:1rem;" v-if="!this.login">{{this.length}}</i></li>
                </router-link>
                
                <router-link to="/focus">
                    <li><a href="###" class="iconfont">&#xe63f;粉丝</a></li>
                </router-link>
                
                <router-link to="/letter">
                    <li><a href="###" class="iconfont">&#xe637;私信</a></li>
                </router-link>
                
            </ul>
        </div>

        <div class="login" v-show="login">
            <a href="/#/login">还未登录，请先登录！</a>
        </div>

        <div class="main" v-show="main">
          <p class="title">
            <span>总数：<i>{{this.list.length}}</i></span>
            <span>未读：<i class="havenot">{{this.hasnot.length}}</i></span>
            <span class="onebutt" @click="one()"><a href="###">一键已读</a></span>
          </p>
          <ul>
            <li v-for="(item,index) in list" :key="item.index" @mouseenter="showdel(index)" @mouseleave="notshow(index)">
              <router-link :to='"/userdetails/" + item.user.id'>
                  <img class="img" :src="item.user.photo" alt="">
              </router-link>
              <div class="comcontent">
                  <router-link :to='"/userdetails/" + item.user.id'>
                      <p><a href="###">{{item.user.name}}</a> <i>{{item.like.time.slice(0,10)}}</i></p>
                  </router-link>
                  <div>赞了</div>
              </div>
              <router-link :to='"/blogdetails/" + item.blog.id' v-if="item.blog">

                <div class="name" v-show="item.blog.title" v-if="item.blog" style="color: #26a2ff">{{item.blog.title}}</div>

              </router-link>


              <img :src="item.resource.photo" alt="" class="target" v-if="item.resource">

              <div class="name" v-show="item.resource.name" v-if="item.resource">{{item.resource.name}}</div>

              <i class="delete" v-show="show[index]"><a href="###" class="iconfont" @click="del(index)" title="删除">&#xe68f;</a></i>
              <span class="read" v-show="!read[index]" @click="isread(index)"><a href="###">未读</a></span>
              <span class="hasread" v-show="read[index]" @click="isread(index)"><a href="###">已读</a></span>
            </li>
          </ul>
        </div>

        <p class="page">
          <span><a href="###" class="iconfont" title="上一页" @click="last()">&#xe634;</a></span>
          <span><i>{{page}}</i></span>
          <span><a href="###" class="iconfont" title="下一页" @click="next()">&#xe666;</a></span>
        </p>
    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import Vue from 'vue'
export default {
    name: 'click',
    data () {
        return {
          login: true,
          main: false,
          list: [],
          read: [],
          hasnot: [],
          show: [],
          length: '',
          page: 1,
        }
    },

    created () {
      axios.post(`/api/user/getUser`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          if (response.data !== "") {
            this.main = true
            this.login = false
          }
        } 

      })

      let postData = qs.stringify({
        page: this.page,
      })

      axios.post(`/api/likeNotice`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
            this.list = response.data
            console.log(this.list)
            this.length = this.list.length
            this.read = []
            for (var i = 0; i < this.list.length; i++) {
              this.read.push(this.list[i].like.isread)
              if (this.read[i] == 0) {
                this.hasnot.push(this.read[i])
              }
              this.show.push(false)
            }
        } 

      })

    },

    methods: {
      last () {
        if(this.page > 1) {
          this.length -= this.list.length
          this.page --
          let postData = qs.stringify({
            page: this.page,
          })

          axios.post(`/api/likeNotice`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
                this.list = response.data
                console.log(this.list)
                this.read = []
                for (var i = 0; i < this.list.length; i++) {
                  this.read.push(this.list[i].like.isread)
                  if (this.read[i] == 0) {
                    this.hasnot.push(this.read[i])
                  }
                }
            } 

          })
        }
        else {
          this.$message({
            type: 'warn',
            message: "当前已经是第一页了！"
          })
        }

      },

      next () {
        if (this.list.length == 5) {
          this.page ++
          let postData = qs.stringify({
            page: this.page,
          })

          axios.post(`/api/likeNotice`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              this.list = response.data
              console.log(this.list)
              this.length += this.list.length
              this.read = []
              for (var i = 0; i < this.list.length; i++) {
                this.read.push(this.list[i].like.isread)
                console.log(this.list[i].like.isread)
                if (this.read[i] == 0) {
                  this.hasnot.push(this.read[i])
                }
              }
              console.log(this.read)
            } 

          })
        }
        else {
          this.$message({
            type: 'warn',
            message: "当前已经是最后一页了！"
          })
        }
      },

      isread (index) {
        if(this.read[index] == false) {
          this.hasnot = []
          this.read[index] = !this.read[index]
          let newItem = this.read[index]
          Vue.set(this.read, index, newItem)

          for (var i = 0; i < this.read.length; i++) {
            // this.read.push(this.list[i].comment.isRead)
            if (this.read[i] == 0) {
              this.hasnot.push(this.read[i])
            }
          }

          let postData = qs.stringify({
            id: this.list[index].like.id,
          })

          axios.post(`/api/setReadLike`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              console.log(response.data)
              // this.allblog[index].blog.likes -- 
            } 

        })
        }

      },

      one () {
        for (var i = 0; i < this.read.length; i++) {
          if(this.read[i] == false) {
          this.hasnot = []
          this.read[i] = !this.read[i]
          let newItem = this.read[i]
          Vue.set(this.read, i, newItem)

            if (this.read[i] == 0) {
              this.hasnot.push(this.read[i])
            }

          let postData = qs.stringify({
            id: this.list[i].like.id,
          })

          axios.post(`/api/setReadLike`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              console.log(response.data)
            }
        })

        }
        }
      },

      showdel (index) {
        this.show[index] = true
        let newItem = this.show[index]
        Vue.set(this.show, index, newItem)
      },

      notshow (index) {
        this.show[index] = false
        let newItem = this.show[index]
        Vue.set(this.show, index, newItem)
      },

      del (index) {
        let postData = qs.stringify({
          id: this.list[index].like.id,
        })

        axios.post(`/api/noShowLike`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            console.log(response.data)
            
            let postData = qs.stringify({
              page: this.page,
            })

            axios.post(`/api/likeNotice`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                  this.list = response.data
                  console.log(this.list)
                  this.length = this.list.length
                  this.read = []
                  this.hasnot = []
                  for (var i = 0; i < this.list.length; i++) {
                    this.read.push(this.list[i].like.isread)
                    if (this.read[i] == 0) {
                      this.hasnot.push(this.read[i])
                    }
                    this.show.push(false)
                  }
              } 

            })

          }
        })
      },

    },
}
</script>

<style lang="stylus" scoped>
.click
  width 100%
  height auto
  margin-top 5.5rem
  position relative
  //background-color skyblue
  .login
    width 76%
    line-height 37rem
    left 20%
    top 0rem
    margin-bottom 2rem
    text-align center
    font-size 1rem
    position absolute
    background-color #fff
    a
      color red
    a:hover
      color #26a2ff
  .sort
    width 16%
    height auto
    margin-bottom 2rem
    padding-bottom 2rem
    margin-left 1%
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    ul
      width 100%
      height auto
      padding-bottom 2rem
      margin-top .5rem
      //background-color red
      li 
        width 100%
        line-height 5rem
        margin-top 3rem
        text-align center
        // background-color skyblue
      li:hover
        background-color #eee
    .active
        background-color #eee
        color #26a2ff
  .main
    width 76%
    height 37rem
    top 0
    left 20%
    position absolute 
    background-color #fff
    .title
      line-height 4rem
      text-indent 4rem
      font-size .9rem
      border-bottom 1px #ccc solid
      box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
      // background-color red
      span 
        margin-right 10%
        i 
          color #26a2ff
        .havenot
          color red
      .onebutt
        border .05rem #ccc solid 
        margin-left 52%
        margin-right 0rem
        border-radius 10px
        padding .2rem .1rem
        box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
        a
          color #26a2ff
      .onebutt:hover
        background-color skyblue
        a
          color #fff
    ul
      width 100%
      height auto
      padding-bottom 1rem
      li
        width 90%
        line-height 5rem
        margin-top 1rem
        margin-left 5%
        position relative
        border .05rem #eee solid
        border-radius 10px
        box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
        background-color #fff
        // background-color red
        .img 
          height 3.5rem
          width 6%
          border-radius 50%
          margin-left 2%
        .comcontent
          width 55%
          height 4.5rem
          top .5rem
          left 8.5%
          position absolute
          padding-top .5rem
          // background-color skyblue 
          p
            line-height 1.5rem
            a
              font-size .8rem
              color #26a2ff
            i 
              color #aaa
              font-size .7rem
          div
            width 76%
            line-height 1.5rem
            display -webkit-box
            word-break break-all
            -webkit-box-orient vertical
            -webkit-line-clamp 2
            overflow hidden
            text-overflow ellipsis
            // background-color red
        .target
          right 29.5%
          top .5rem
          width auto
          position absolute
          // background-color red
          height 4rem
        .name
          height 5rem
          line-height 1.5rem
          width 20%
          top 0rem
          left 71%
          position absolute
          padding-top .5rem
          box-sizing border-box
          // background-color skyblue
        .delete
          position absolute 
          right 7%
          font-weight 700
        .read
          position absolute
          left 94%
          top 1.8rem
          padding 0rem .5rem
          line-height 1.5rem
          color red
          border-radius .5rem
          border .05rem  solid
          a
            color red
        .hasread
          position absolute
          left 94%
          top 1.8rem
          padding 0rem .5rem
          line-height 1.5rem
          color #26a2ff
          border-radius .5rem
          border .05rem  solid
          a
            color #26a2ff
  .page 
    width 16%
    left 1%
    line-height 3rem
    bottom 1rem
    position fixed
    z-index 10
    display flex
    border .05rem #ccc solid
    background-color #fff
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    span
      width 10%
      margin-left 15%
      text-align center
      font-size 1.2rem
      background-color #fff
      a
        font-size 2rem
      i
        color #26a2ff
</style>